<template>
  <!-- 主页 -->
  <div class="lyj-main">
    <ul>
      <li v-for="(item,index) in films" :key="index">
        <a href="#">
          <div class="imgDiv">
            <img :src="item.poster" alt>
          </div>
          <div class="rightDiv">
            <div class="H6div">
              <h6>{{ item.name }}</h6>
              <div>{{ item.filmType.name }}</div>
            </div>
            <!-- <div class="pinDiv">
              观众评分:
              <span style="color:#ff9665;">{{ item.grade }}</span>
            </div>-->
            <!-- zhuYanDiv方法，主演数组传进这个方法去，构建一个函数去遍历 -->
            <div class="zhuYanDiv">主演：{{ zhuYanDiv(item.actors) }}</div>
            <div class="guoJiaDiv">{{ item.nation }} | {{ item.runtime }}分钟</div>
          </div>
        </a>
        <div class="Ticket">
          <a href="#">预购</a>
        </div>
      </li>
    </ul>
    <!-- 点击加载下一页 -->
    <div class="load-more" @click="loadMore">{{ loadMoreText }}</div>
  </div>
</template>

<script>
import axios from "axios"; //ajax请求的第三方包
export default {
  name: "SoonPlay",
  data() {
    return {
      films: [],

      loadMoreText: "点击加载...",

      pageNum: 1, //当前页码
      pageSize: 5, //当前页数
      totalPage: 0 //总页数
    };
  },
  methods: {
    /**
     * 获取电影数据(json文件)
     */
    getFilmName() {
      // 发送请求到后台请求数据
      axios
        .get("/api/films/list", {
          //以api开头的就会触发正向代理(config下面的index.js)
          params: {
            // get请求的参数要在这里传递
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: 2
          }
        })
        .then(res => {
          // res不单单包含后台给的数据，还有一些额外的东西。
          // then解决ajax的回调地狱
          let result = res.data;

          // 一共多少页
          this.totalPage = Math.ceil(result.data.total / this.pageSize);

          // 判断是否还有更多页
          if (this.pageNum >= this.totalPage) {
            // 没有更多页面
            this.loadMoreText = "别拉了，我是有底线的...";
          }

          if (result.code === 0) {
            // 请求成功
            // this.films = result.data.films;
            this.films = this.films.concat(result.data.films);
          } else {
            // 请求失败
            alert(result.msg);
          }
        });
    },
    /**
     * 主演遍历
     */
    zhuYanDiv(actors) {
      let arr = [];
      //如果actors有值就循环，没有就加载得了
      if (actors) {
        // es6的map可以获取actors里面的每一个值
        arr = actors.map(item => {
          return item.name;
        });
      }
      // join:数组转字符串
      return arr.join(" ");
    },
    /**
     * 加载更多
     */
    loadMore() {
      // 对当前页码加1
      if (this.pageNum < this.totalPage) {
        this.pageNum++;
        this.getFilmName();
      }
    }
  },
  // 创建之后请求电影数据
  created() {
    this.getFilmName();
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";
// main=====
.lyj-main {
  width: 100%;
  flex: 1;
  overflow: auto;
  // main 的底部，必须要给main底部留出主页底部的高度
  // border-bottom: px2rem(15) solid rgb(165, 30, 30);

  ul {
    display: flex;
    flex: 1;
    box-sizing: border-box;
    padding-left: px2rem(15);
    // ul不给弹盒方向，会横向排列
    flex-direction: column;

    li {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      // flex-direction: column;
      padding: px2rem(15) px2rem(15) px2rem(15) px2rem(0);
      height: px2rem(124);
      border-bottom: px2rem(1) solid #ddd;

      a {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        text-decoration: none;

        .imgDiv {
          width: px2rem(66);
          height: 100%;
          margin-right: px2rem(10);

          img {
            width: px2rem(66);
          }
        }

        .rightDiv {
          display: flex;
          flex-direction: column;

          .H6div {
            display: flex;
            width: 100%;
            height: px2rem(25);
            align-items: center;

            h6 {
              color: #000;
              font-size: px2rem(18);
              font-weight: 500;
              margin-right: px2rem(10);
            }

            div {
              width: px2rem(20);
              height: px2rem(18);
              background: rgb(210, 214, 220);
              border-radius: px2rem(3);
              color: white;
              text-align: center;
              line-height: px2rem(18);
              font-size: px2rem(12);
            }
          }

          .pinDiv {
            margin-top: px2rem(3);
            font-size: px2rem(14);
            color: #373737;
          }

          .zhuYanDiv {
            margin-top: px2rem(3);
            font-size: px2rem(15);
            color: #373737;
            width: px2rem(200);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .guoJiaDiv {
            margin-top: px2rem(3);
            font-size: px2rem(14);
            color: #373737;
          }
        }
      }

      // 购票
      .Ticket {
        width: px2rem(60);
        height: px2rem(25);
        border: px2rem(1) solid rgb(255, 104, 36);
        border-radius: px2rem(3);
        position: absolute;
        top: 50%;
        right: px2rem(20);
        margin-top: px2rem(-13);

        a {
          display: block;
          width: px2rem(60);
          height: px2rem(25);
          line-height: px2rem(25);
          text-align: center;
          font-size: px2rem(16);
          color: rgb(255, 104, 36);
        }
      }
    }
  }
}
.load-more {
  height: px2rem(30);
  line-height: px2rem(30);
  text-align: center;
  font-size: px2rem(18);
}
</style>
